<template>
  <div class="navFooter">
    <footer class="foot">
      <el-col :xs="15" :sm="12" :md="8" :lg="8" class="left">
        <section class="contact">
          <h1 class="word">联系我们</h1>
          <p class="wrapPhone">
            <span class="icon-phone phone"></span>
            <span class="phoneNum">028-87339759</span>
          </p>
          <p class="wrapAddress">
            <span class="icon-address addressLogo"></span>
            <span class="address">四川省成都市青羊区小南街28号16楼</span>
          </p>
          <p class="wrapPost">
            <span class="icon-post post"></span>
            <span class="postNum">610015</span>
          </p>
          <p class="wrapCopy">
            <img src="../../static/img/备案.png" alt="">
            <span class="copyright">共青团成都市团校 蜀ICP备05003425号</span>
          </p>
        </section>
      </el-col>
      <el-col :xs="12" :sm="12" :md="8" :lg="8" class="middle">
        <section class="qr">
          <img src="../../static/img/二维码.png" alt="">
          <h3>微团校公众号</h3>
          <div class="clear">
            <router-link to="ideaResults" class="li">下载文件</router-link>
            <span class="li" @click="goUser('/userCenterInfo')">个人档案</span>
            <span class="li" @click="goUser('/personalTraining')">我的课程</span>
          </div>
        </section>
      </el-col>
      <el-col :xs="9" :sm="12" :md="8" :lg="8" class="right">
        <a :href="$wxHref">
			<section class="adds">
			  <h3>成都青年培训中心</h3>
			  <h5>Chengdu Youth Training Center</h5>
			</section>
	  </a>
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :lg="24" class="copy_mobile">
        <img src="../../static/img/备案.png" alt="">
        <span class="wrapCopy_mobile">共青团成都市团校 蜀ICP备05003425号</span>
      </el-col>
    </footer>
  </div>
</template>
<script>
export default {
  data() {
    return {
      userInfo:{}
    }
  },
  components: {

  },
  methods: {
    goUser(val){
      console.log(this.userInfo)
      if(!this.userInfo.AccessToken){
        this.$message({ message: '请先登录', type: 'error' });
      }else{
        this.$router.push(val)
//        return;
      }
    }
  },
  mounted() {
    if(this.$bw.getStorage("userInfo")){
      this.userInfo = this.$bw.getStorage('userInfo')
    }
  },
}

</script>
<style scoped lang="less">
@media screen and (min-width: 829px) {
  .navFooter {
    box-shadow: 0 0 0.57rem 0 rgba(0, 0, 0, 0.12);
    position: relative;
    z-index: 1;
  }
  .copy_mobile{
    display: none;
  }
  .foot {
    width: 80%;
    margin: 0 auto;
    height: 14.64rem;
    .contact {
      height: 14.64rem;
      width: 100%;
      position: relative;
      .word {
        width: 5.07rem;
        height: 1.29rem;
        font-size: 1rem;
        
        position: absolute;
        top: 1.86rem;
        
        color:rgba(51,51,51,1);
      }
      .phone {
        position: absolute;
        font-size: 0.93rem;
        top: 4.88rem;
        color: #CCCCCC;
      }
      .phoneNum {
        height: 0.71rem;
        font-size: 0.93rem;
        
        color: #999999;
        position: absolute;
        left: 1.36rem;
        top: 4.71rem;
      }
      .addressLogo {
        position: absolute;
        font-size: 1rem;
        top: 6.97rem;
        color: #CCCCCC;
      }
      .address {
        height: 0.71rem;
        font-size: 0.93rem;
        
        color: #999999;
        position: absolute;
        left: 1.36rem;
        top: 6.86rem;
      }
      .post {
        position: absolute;
        font-size: 1rem;
        top: 9.2rem;
        color: #CCCCCC;
      }
      .postNum {
        height: 0.71rem;
        font-size: 0.93rem;
        
        color: #999999;
        position: absolute;
        left: 1.36rem;
        top: 9.07rem;
      }
      .wrapCopy img {
        position: absolute;
        top: 12.14rem;
      }
      .copyright {
        height: 0.71rem;
        font-size: 0.93rem;
        
        color: #999999;
        position: absolute;
        left: 1.36rem;
        top: 12.1rem;
      }
    }

    .qr {
      height: 14.64rem;
      width: 100%;
      position: relative;
      img {
        display: block;
        width: 7.14rem;
        height: 7.14rem;
        position: absolute;
        top: 1.43rem;
        left: 0;
        bittom: 0;
        right: 0;
        margin: auto
      }
      h3 {
        text-align: center;
        width: 6.5rem;
        font-size: 1rem;
        
        position: absolute;
        left: 0;
        bittom: 0;
        right: 0;
        top: 9rem;
        margin: auto;
        line-height: 1rem;
        color:rgba(51,51,51,1);
      }
      div {
        position: absolute;
        left: 0;
        bittom: 0;
        right: 0;
        margin: auto;
        top: 12.21rem;
        width: 18rem;
      }
      div .li {
        float: left;
        min-width: 4rem;
        color: #cccccc;
        cursor: pointer;
      }
      div>.li {
        margin-left: 1.5rem;
      }
    }

    .adds {
      height: 14.64rem;
      width: 100%;
      position: relative;
      h3 {
        text-align: center;
        min-width: 14.14rem;
        min-height: 1.64rem;
        font-size: 1.57rem;
        right: 0px;
        top: 3.86rem;
        position: absolute;
        font-weight:bold;
        color:rgba(51,51,51,1);
      }
      h5 {
        min-width: 14.14rem;
        min-height: 1.64rem;
        font-size: 0.86rem;
        top: 6.43rem;
        position: absolute;
        
        color: #95908C;
        right: 0px;
      }
    }
  }
}

@media screen and (max-width: 829px) {
  .navFooter {
    position: relative;
    /*box-shadow: 0 0 17px 0 rgba(0, 0, 0, 0.2);*/
    height: 3rem;
    * {
      box-sizing: border-box;
    }
    .middle {
      display: none
    }
    .contact {
      padding-left: 0.54rem;
      font-size: 0.2rem;
      color: #3E3A39;
      p {
        margin-bottom: 0.2rem;
      }
    }
    .wrapAddress {
      word-break: keep-all;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .word {
      font-size: 0.36rem;
      padding-bottom: 0.3rem;
      padding-top: 0.35rem;
      color: rgba(62,58,57,1);
      font-family:PingFang-SC-Bold;
    }
    .right {
      padding-top: 1.1rem;
      color: #3E3A39;
      h3 {
        font-size: 0.3rem;
      }
      h5 {
        font-size: 0.16rem;
        font-weight: 400;
      }
    }
    .wrapCopy {
      display: none;
    }
    .copy_mobile{
    text-align: center;
  }
    .wrapCopy_mobile {
      width: 100%;
      text-align: center;
      color: #CCCCCC;
      font-size: 0.12rem;
      bottom: 0.1rem;
      margin-bottom: 0 !important;
      img{width: 0.16rem;}
    }
  }
}

</style>
